<template>
  <!-- 6第一、三人称漫游/8玩家角色左右运动(叉乘) -->
  <div
    @keydown="handleKeyDown"
    @keyup="handleKeyUp"
    @mousemove="handleMouseMove"
    @mousedown="handleMouseDown"
    @mouseup="handleMouseUp"
    tabindex="0"
  >
    <div id="webgl" class="main"></div>
  </div>
</template>
  <script setup>
// import TWEEN from "@tweenjs/tween.js";
import * as THREE from "three";
import { onMounted } from "vue";
// import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import Mesh from "./mesh.js";
import camera from "./camera.js";
// 创建一个3D场景scene
const scene = new THREE.Scene();
const { model, player } = Mesh;
scene.add(model);
// AxesHelper：辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);
//光源设置
const ambient = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambient);
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
directionalLight.position.set(80, 100, 50);
scene.add(directionalLight);
var width = window.innerWidth;
var height = window.innerHeight;
// 将相机添加到场景
// scene.add(camera);
camera.position.set(0, 1.6, 6);
camera.lookAt(0, 1.6, 0);
// 相机作为玩家角色子对象，可以实现相机对玩家角色模型的跟随运动，使相机运动，
player.add(camera);
// 最大/最小的角度，将角度转换为弧度
const angleMax = THREE.MathUtils.degToRad(15);
const angleMin = THREE.MathUtils.degToRad(-15);
const handleMouseMove = (event) => {
  if (isMouseDown) {
    player.rotation.y -= event.movementX / 600;
    camera.rotation.x += event.movementY / 600;
    if (camera.rotation.x > angleMax) {
      camera.rotation.x = angleMax;
    }
    if (camera.rotation.x < angleMin) {
      camera.rotation.x = angleMin;
    }
  }
};
let isMouseDown = false;
const handleMouseDown = () => {
  isMouseDown = true;
};
const handleMouseUp = () => {
  isMouseDown = false;
};
const gridHelper = new THREE.GridHelper(50, 50);
scene.add(gridHelper);
// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true, //添加抗锯齿
  preserveDrawingBuffer: true,
});
renderer.setSize(width, height);
renderer.outputEncoding = THREE.sRGBEncoding;

// 设置相机控件轨道控制器
// const controls = new OrbitControls(camera, renderer.domElement);
// console.log("", controls);
const keySatates = {
  W: false,
  S: false,
  A: false,
  D: false,
};
const handleKeyDown = (event) => {
  if (event.code == "KeyW") keySatates.W = true;
  if (event.code == "KeyS") keySatates.S = true;
  if (event.code == "KeyA") keySatates.A = true;
  if (event.code == "KeyD") keySatates.D = true;
};
const handleKeyUp = (event) => {
  if (event.code == "KeyW") keySatates.W = false;
  if (event.code == "KeyS") keySatates.S = false;
  if (event.code == "KeyA") keySatates.A = false;
  if (event.code == "KeyD") keySatates.D = false;
};
const v = new THREE.Vector3(0, 0, 0); //z轴速度
const a = 12; //加速度
const damping = -0.04; //阻尼系数
const clock = new THREE.Clock();
const render = () => {
  renderer.render(scene, camera);
  //clock.getDelta()方法获得loop()两次执行时间间隔
  const frameT = clock.getDelta();
  if (keySatates.W) {
    //  假设沿着z轴负方向
    const front = new THREE.Vector3();
    // 获取当前玩家角色的朝向
    player.getWorldDirection(front);
    if (v.length() < 5) {
      // 计算速度的该变量
      v.add(front.multiplyScalar(-a * frameT));
    }
  }
  if (keySatates.S) {
    //  获取人物的正前方
    const front = new THREE.Vector3();
    // 获取当前玩家角色的朝向
    player.getWorldDirection(front);
    if (v.length() < 5) {
      // 计算速度的该变量
      v.add(front.multiplyScalar(a * frameT));
    }
  }
  if (keySatates.A) {
    //  获取人物的正前方
    const front = new THREE.Vector3();
    // 获取当前玩家角色的朝向
    player.getWorldDirection(front);
    // y轴
    const up = new THREE.Vector3(0, 1, 0);
    // 正前方和y轴，叉乘得出左右
    const right = front.cross(up);
    if (v.length() < 5) {
      // 计算速度的该变量
      v.add(right.multiplyScalar(a * frameT));
    }
  }
  if (keySatates.D) {
    //  获取人物的正前方
    const front = new THREE.Vector3();
    // 获取当前玩家角色的朝向
    player.getWorldDirection(front);
    // y轴
    const up = new THREE.Vector3(0, 1, 0);
    // 正前方和y轴，叉乘得出左右的方向
    const right = up.cross(front);
    if (v.length() < 5) {
      // 计算速度的该变量
      v.add(right.multiplyScalar(a * frameT));
    }
  }
  v.addScaledVector(v, damping); //通过阻尼系数对速度减速
  // 变化时间内，人的位移
  const timeX1 = v.clone().multiplyScalar(frameT);
  player.position.add(timeX1);
  // 浏览器用于定时循环操作某一个函数，一秒钟60次左右
  window.requestAnimationFrame(render);
};

render();
window.onresize = function () {
  width = window.innerWidth;
  height = window.innerHeight;
  renderer.setSize(width, height);
};
onMounted(() => {
  document.getElementById("webgl").appendChild(renderer.domElement);
});
</script>
  <style scoped>
</style>